<template>
	<div class="recommend">
		<div class="home_body_banner">
			<swiper :options="swiperOption" v-if='picture.length!=1'>
				<swiper-slide v-for="(slide, key) in picture" :key="key"><a><img :src='slide.l_img'></a></swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
		</div>
		<div class="liang-top">
			<p class="liang-topTitle">
				<span class="liang-topName">限时抢兑</span>
				<span class="liang-topSub" @click="$router.push({path: '/liang/productList'})">每日兑换</span>
			</p>
		</div>
		<div class="liang-time clear2">
			<div class="liang-timeL">
				开场倒计时
			</div>
			<div class="liang-timeR">
				<p>{{timeList[9]+timeList[10]}}天</p><span>{{timeList[0]}}</span><span >{{timeList[1]}}</span><span >{{timeList[2]}}</span><span >{{timeList[3]}}</span><span >{{timeList[4]}}</span><span >{{timeList[5]}}</span><span >{{timeList[6]}}</span><span >{{timeList[7]}}</span>
				
				
				
					
				
				
				
				
				
			</div>
		</div>
		<div class="liang-body clear2">
			<div class="liang-list" v-for="(data,index) in dataList" @click="Toast('开场时间未到')">
				<img :style="{'height':Imgheight+'px'}" class="liang-listImg" :src="'../../../../static/img/liang/'+index+'.jpg'" />
				<p class="liang-listName">{{data.Name}}</p>
				<p class="liang-listPrice">￥{{data.Price}}.00</p>
				<p class="liang-listExchange">兑换价：{{data.Exchange}}匠子</p>
				<p class="liang-listStock">库存{{data.Stock}}件</p>
			</div>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import vFooter from '../../common/footer.vue';
	require('swiper/dist/css/swiper.css');
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		components:{
            vFooter,
            swiper,
			swiperSlide
        },
		data: function() {
			
			return {
				dataList:[{
					'Name':'万岛夫人即食燕窝',
					'Price':'1880.00',
					'Exchange':'1880',
					'Stock':'99'
				},{
					'Name':'Iphine X 256GB',
					'Price':'9688.00',
					'Exchange':'9688',
					'Stock':'19'
				},{
					'Name':'荣耀Magic 八曲面屏',
					'Price':'3388.00',
					'Exchange':'3388',
					'Stock':'99'
				},{
					'Name':'Meitu/美图 V6',
					'Price':'5999.00',
					'Exchange':'5999',
					'Stock':'99'
				},{
					'Name':'Apple Watch/苹果 Series 3',
					'Price':'3488.00',
					'Exchange':'3488',
					'Stock':'99'
				},{
					'Name':'华为B3智能运动手环',
					'Price':'1499.00',
					'Exchange':'1499',
					'Stock':'99'
				},{
					'Name':'古驰Gucci女士石英表',
					'Price':'5999.00',
					'Exchange':'5999',
					'Stock':'99'
				},{
					'Name':'古驰Gucci女士石英表',
					'Price':'4680.00',
					'Exchange':'4680',
					'Stock':'99'
				},{
					'Name':'卡地亚蓝气球W6920046',
					'Price':'37500.00',
					'Exchange':'37500',
					'Stock':'99'
				},{
					'Name':'LV 女士Alma BB手提包',
					'Price':'8988.00',
					'Exchange':'8988',
					'Stock':'99'
				},{
					'Name':'LV  Turenne女士单肩包',
					'Price':'10999.00',
					'Exchange':'10999',
					'Stock':'99'
				},{
					'Name':'香奈儿 女士小号流浪包',
					'Price':'30588.00',
					'Exchange':'30588',
					'Stock':'99'
				},{
					'Name':'CHANEL/香奈儿 手提包',
					'Price':'25911.00',
					'Exchange':'25911',
					'Stock':'99'
				},{
					'Name':'迪奥 女士小羊皮手提包',
					'Price':'28387.00',
					'Exchange':'28387',
					'Stock':'99'
				},{
					'Name':'卡地亚 TRINITY三色戒指',
					'Price':'8648.00',
					'Exchange':'8648',
					'Stock':'99'
				},{
					'Name':'卡地亚 18K玫瑰金钻石戒指 ',
					'Price':'9995.00',
					'Exchange':'9995',
					'Stock':'99'
				},{
					'Name':'卡地亚 玛瑙母贝钻石手镯',
					'Price':'30959.00',
					'Exchange':'30959',
					'Stock':'99'
				},{
					'Name':'卡地亚 18K玫瑰金钻石项链',
					'Price':'15220.00',
					'Exchange':'15220',
					'Stock':'99'
				},{
					'Name':'爱马仕 18K金镶钻戒指',
					'Price':'35000.00',
					'Exchange':'35000',
					'Stock':'99'
				},{
					'Name':'爱马仕 小号H手镯金扣',
					'Price':'4833.00',
					'Exchange':'4833',
					'Stock':'99'
				},{
					'Name':'万事利 大方巾-魔幻森林',
					'Price':'880.00',
					'Exchange':'880',
					'Stock':'99'
				},{
					'Name':'万事利 大方巾-西域密码',
					'Price':'598.00',
					'Exchange':'598',
					'Stock':'99'
				},{
					'Name':'万事利 月亮诗歌（四件套）',
					'Price':'7580.00',
					'Exchange':'7580',
					'Stock':'99'
				},{
					'Name':'万事利 星夜水晶（四件套）',
					'Price':'12800.00',
					'Exchange':'12800',
					'Stock':'99'
				}],
				picture:[{
					'l_img':'../../../../static/img/images/l01.png'
				},{
					'l_img':'../../../../static/img/images/l02.png'
				},{
					'l_img':'../../../../static/img/images/l03.png'
				}],
				swiperOption: {
					autoplay: 5000,
					initialSlide: 1,
					loop: true,
					pagination: '.swiper-pagination',
					onSlideChangeEnd: swiper => {
						//						console.log('onSlideChangeEnd', swiper.realIndex)
					},
				},
				Time:1382400,
				timeList:['0','0',':','0','0',':','0','0'],
				Imgheight:0,
				
			}
		},
		mounted() {
        	this.resetTime(this.Time);
        	this.Imgheight=document.body.offsetWidth*0.46;
		},
		methods: {
			resetTime(time){
				let timer = null;
				let t = time;
				let hour;
			    let min;
			    let sec;
			    let day;
			    let _this=this;
				
				function countDown() {
				    let countDownTime = [];
				    day =Math.floor(t /24 / 60 / 60 % 24);
					hour = Math.floor(t  / 60 / 60 % 24);
			      	min = Math.floor(t / 60 % 60);
			      	sec = Math.floor(t  % 60);
				    if (t < 0) {
				    	day='00';
				      hour = '00';
				      min = '00';
				      sec = '00';
				      countDownTime.push(hour);
				      countDownTime.push(min);
				      countDownTime.push(sec);
				      countDownTime.push(day);
				      _this.timeList=countDownTime.toString().replace(/,/g, ":").split('');;
				      clearInterval(timer);
				      
				    }
				    else {
				      
				      if (hour < 10) {
				        hour = "0" + hour;
				      }
				      if (min < 10) {
				        min = "0" + min;
				      }
				      if (sec < 10) {
				        sec = "0" + sec;
				      }
				      if (day < 10) {
				        day = "0" + day;
				      }
				      countDownTime.push(hour);
				      countDownTime.push(min);
				      countDownTime.push(sec);
				      countDownTime.push(day);
				      t--;
				      _this.timeList=countDownTime.toString().replace(/,/g, ":").split('');
					}
				}
				timer = setInterval(countDown, 1000);
			},
		}
	}
</script>

<style scoped>
	.liang-top{
		text-align: center;
    	margin: 1rem 0;
	}
	.liang-topTitle{
		display: inline-block;
		border: 1px solid #000000;
		overflow: hidden;
		height: 2rem;
		box-sizing: border-box;
		border-radius: 0.4rem;
	}
	.liang-topName{
		padding: 0 0.5rem;
		height: 1.9rem;
		line-height: 1.9rem;
		font-size: 1.3rem;
		display: inline-block;
		text-align: center;
		color: #f7bd40;
		background: #000;
	}
	.liang-topSub{
		padding: 0 0.5rem;
		height: 1.9rem;
		display: inline-block;
		line-height: 1.9rem;
		font-size: 1.3rem;
		text-align: center;
		
		
	}
	
	.home_body_banner{
		width: 100%;
		background: #b5b5b5;
		font-size: 3rem;
		text-align: center;
		font-weight: bold;
	}
	.home_body_banner img{
		width: 100%;
		display: block;
	}
	.liang-time{
		height: 4.4rem;
		width: 100%;
		background: #000;
	}
	.liang-timeL{
		float: left;
		line-height: 4.4rem;
		font-size: 1.2rem;
		color: #fff;
		text-align: center;
		width: 50%;
	}
	.liang-timeR{
		float: left;
		line-height: 4.4rem;
		font-size: 1.2rem;
		color: #fff;
		text-align: center;
		width: 50%;
		font-weight: bold;
	}
	.liang-timeR p{
		display: inline;
		border: 1px solid #605f63;
		border-radius: 2px;
		padding: 4px 2px;
		margin: 0 3px 0 1px;
	}
	.liang-timeR span{
		border: 1px solid #605f63;
		border-radius: 2px;
		padding: 4px 2px;
		margin: 0 1px;
	}
	.liang-timeR span:nth-child(3n+1){
		border: 0;
		padding: 0;
	}
	.liang-list{
		padding: 1rem 2% 0 2%;
		width: 45%;
		float: left;
		font-family: "微软雅黑";
		margin-bottom: 0.5rem;
	}
	.liang-list:nth-child(2n){
		float: right;
	}
	.liang-listImg{
		display: block;
		width: 100%;
		object-fit: cover;
		height: 100%;
		box-sizing: border-box;
		border: 2px solid #7a7a7a;
		
	}
	.liang-listName{
		font-size: 1.3rem;
		height: 1.5rem;
		padding-top: 1.5rem;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		
	}
	.liang-listPrice{
		color: #6a6a6a;
		padding-top: 0.7rem;
		font-size: 1.3rem;
		height: 1.5rem;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.liang-listExchange{
		color: #6a6a6a;
		padding-top: 0.6rem;
		font-size: 1.3rem;
		height: 1.5rem;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.liang-listStock{
		color: #999999;
		padding-top: 0.6rem;
		font-size: 1rem;
		text-overflow: ellipsis;
		overflow: hidden;
		height: 1.5rem;
		white-space: nowrap;
	}
</style>
<style>
	.home_body_banner .swiper-pagination{
		bottom: 0 !important;
	}
	
	.home_body_banner .swiper-pagination-bullet{
		background: #fff;
		opacity: 1;
	}
	.home_body_banner .swiper-pagination-bullet-active{
		background: rgb(247, 189, 64);
	}
</style>